import { findByDataMenuTreeRoleList } from '@/services/sys/MenuService';
import {
  roleDistributionNav,
  roleMenuByList,
} from '@/services/sys/RoleMenuService';
import { PlusOutlined } from '@ant-design/icons';
import { ProColumns, ProTable } from '@ant-design/pro-components';
import { useRequest } from 'ahooks';
import { Button, message, Modal, Typography } from 'antd';
import React, { useEffect, useState } from 'react';

const { Text, Link } = Typography;

interface Props {
  row?: API.MenuTreeInfo;
  onSuccess?: () => void;
  onFail?: () => void;

  text: string;
  isCard?: boolean;
}

const TableRole: React.FC<Props> = (props) => {
  const [visible, setVisible] = useState(false);
  const { row, onSuccess, onFail, text, isCard } = props;
  const isShow = () => {
    setVisible(true);
  };

  const isHide = () => {
    setVisible(false);
  };

  const [selectedKeys, setSelectedKeys] = useState<number[]>([]);
  const [selectedRoleKeys, setSelectedRoleKeys] = useState<number[]>([]);
  const { data, loading, refresh } = useRequest(findByDataMenuTreeRoleList, {});

  useEffect(() => {
    if (row?.id) {
      roleMenuByList(row?.id).then((res) => {
        console.log(res);
        setSelectedKeys(res);
      });
    }
  }, [row?.id]);
  const columns: ProColumns<API.MenuTreeInfo>[] = [
    {
      title: '标题',
      dataIndex: 'name',
    },

    {
      title: '关键字',
      dataIndex: 'code',
    },
  ];
  const sendData = () => {
    console.log(selectedKeys);
    roleDistributionNav({
      roleId: row?.id,
      ids: selectedKeys,
    })
      .then((res) => {
        message.success('提交成功');
        isHide();
        if (onSuccess) {
          refresh();
          onSuccess();
        }
      })
      .catch((e) => {
        message.error(e.msg);
        if (onFail) {
          onFail();
        }
      });
  };
  return (
    <>
      {isCard ? (
        <Button onClick={isShow} type="primary">
          <PlusOutlined />
          {text}
        </Button>
      ) : (
        <Button onClick={isShow} type="link">
          <PlusOutlined />
          {text}
        </Button>
      )}
      <Modal
        title={text}
        onCancel={isHide}
        destroyOnClose={true}
        open={visible}
        onOk={() => {
          console.log(selectedKeys);
          sendData();
        }}
      >
        <ProTable<API.MenuTreeInfo>
          options={false}
          rowKey={(record) => record.id}
          rowSelection={{
            selectedRowKeys: selectedKeys,
            type: 'checkbox',
            onChange: (selectedRowKeys: any[], selectedRows) => {
              console.log(selectedRowKeys, selectedRows);
              // row.children = selectedRows;
              setSelectedKeys(selectedRowKeys);
            },
          }}
          pagination={false}
          columns={columns}
          loading={loading}
          request={findByDataMenuTreeRoleList}
          search={false}
        ></ProTable>
      </Modal>
    </>
  );
};
export default TableRole;
